<template>
  <view class="EnrollList">
    <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view class="cu-item flex-sub" :class="item.value===curTab?'text-green cur':''" v-for="item in tabs"
              :key="item.value" @tap="tabSelect(item.value)">
          {{ item.title }}
        </view>
      </view>
    </scroll-view>

    <view class="" v-if="curTab === 'enroll'">
      <detail :detail="enrollList[0]"/>
    </view>

    <view class="" v-if="curTab === 'ZL'">
      <view v-if="ZLList.length > 0" style="margin-bottom: 80rpx">
        <view class="cu-card" v-for="item in ZLList" :key="item.CBM_ID">
          <view class="cu-item shadow padding card-item" style="margin-top: 20rpx;margin-bottom: 10rpx;">
            <view class="cu-list menu">
              <view class="cu-item">
                <view class="content flex-sub">
                  <view class="text-black text-bold">{{ item.CLASSNAME }}</view>

                  <view class="text-gray text-sm flex">
                    <text>专业： {{ item.MAJOR_NAME }}</text>
                  </view>

                  <view class="text-gray text-sm flex">
                    <text>开课时间： {{ item.S_KK_DATE }}</text>
                  </view>

                  <view class="text-gray text-sm flex">
                    <text>上课时间： {{ item.SKSJSNR }}</text>
                  </view>

                  <view class="text-gray text-sm flex margin-tb-xs">
                    <view class="cu-tag radius bg-red light" style="position: relative;margin-left: 0">
                      {{ item.DSZ_FLAGNR }}
                    </view>
                  </view>
                </view>
              </view>

              <view class="cu-item">
                <view class="text-sm" :class="`text-${statusMap[item.SH_FLAG].color}`">
                  {{ item.SH_FLAGNR }} {{ item.STATENR }}
                </view>

               <view>
                 <template v-if="item.ZZY_FLAG === '1'">
                   <button class="cu-btn sm bg-red round shadow margin-xs" @tap="toApplyZZY(item.CBM_ID)">
                     转班申请
                   </button>
                 </template>

                 <template v-if="item.QXXZ_FLAG === '1'">
                   <button class="cu-btn sm bg-blue round shadow margin-xs" @tap="cancelCourse(item.CLASS_ID + '')">
                     取消选择
                   </button>
                 </template>
               </view>

              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="text-gray text-center margin-top text-sm">-- 暂无数据 --</view>

    </view>

  </view>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import {doApplyZZY, getEnrollDetail, updateEnrollForm} from "../../api/enroll";
import {useUserEnrollList} from "./useUserEnrollList";
import {onMounted, ref} from "vue";
import Detail from "./detail.vue";
import {onLoad} from "@dcloudio/uni-app";

const {state} = useStore()
const {enrollList, initUserEnrollList, ZLList} = useUserEnrollList()

const statusMap = {
  '0': {
    color: 'yellow'
  },
  '1': {
    color: 'green'
  },
  '2': {
    color: 'red'
  }
}

function toApplyZZY(CBM_ID: number){
  uni.navigateTo({
    url: `/pages/enroll/ZZY?CBM_ID=${CBM_ID}`
  })
}

// function applyZZY(CBM_ID: string, CLASS_ID: string){
//   uni.showModal({
//     title: '提示',
//     content: '确定提交转班申请？',
//     success: async ({confirm}) => {
//       if (confirm){
//         try {
//           const res = await doApplyZZY({
//             CBM_ID,
//             CLASS_ID,
//             OPERATOR_ID: state.user.userInfo.CUSER_ID
//           })
//
//           if (res.ERROR[0].errcode == '0'){
//             console.log(res)
//             uni.showToast({
//               title: '申请成功',
//               icon: 'success',
//               mask: true,
//               success: () => {
//                 setTimeout(() => {
//                   initUserEnrollList()
//                 },500)
//               }
//             })
//           }else {
//             uni.showToast({
//               title: res.ERROR[0].error,
//               icon: 'none',
//               mask: true
//             })
//           }
//         }catch (err){
//           uni.showToast({
//             title: '提交失败',
//             icon: 'error',
//             mask: true
//           })
//         }
//
//       }
//     }
//   })
// }

onMounted(async () => {
  try {
    await initUserEnrollList()
    if (enrollList.value.length === 0) {
      uni.showModal({
        title: '提示',
        content: '暂无报名表，请前往首页进行报名',
        showCancel: false,
        confirmText: '好的'
      })
    }
  } catch (err) {
  }
})

onLoad(() => {
  uni.$on('ZZYFinish', async () => {
    await initUserEnrollList()
  })
})

const tabs = [
  {
    value: 'enroll',
    title: '报名表详情'
  },
  {
    value: 'ZL',
    title: '选报专业班'
  }
]
const curTab = ref(tabs[0].value)

function tabSelect(tab: string) {
  curTab.value = tab
}

async function toDetail(id: string | number) {
  try {
    const res = await getEnrollDetail({
      ENROLL_ID: id,
      OPERATOR_ID: state.user.userInfo.CUSER_ID
    })
    if (res.ERROR[0].errcode == '0') {
      uni.navigateTo({
        url: `/pages/enroll/detail?info=${encodeURIComponent(JSON.stringify(res.DAT[0]))}`
      })
    } else {
      uni.showToast({
        title: res.ERROR[0].error,
        icon: 'none',
        mask: true
      })
    }
  } catch (err) {
    uni.showToast({
      title: '获取报名表失败',
      icon: 'error',
      mask: true
    })
  }
}

function cancelCourse(CLASS_ID: string){
  uni.showModal({
    title: '提示',
    content: '是否取消该班报名？',
    success: ({confirm}) => {
      if (confirm){
        const CLASS_IDS = enrollList.value[0].CLASS_IDS.split(';').filter(item => item != CLASS_ID).join(';')
        updateEnrollForm({
          ...enrollList.value[0],
          CLASS_IDS,
          OPERATOR_ID: state.user.userInfo.CUSER_ID,
          USERNO: state.user.userInfo.USERNO,
          USERNAME: state.user.userInfo.USERNAME
        })
      }
    }
  })
}

</script>

<style scoped lang="scss">
.EnrollList {

  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
}
</style>
